<template>
  <div class="stats-section">
    <el-row :gutter="20">
      <el-col :md="6" :sm="12" :xs="24">
        <div class="stats-card">
          <div class="stats-title">总会议室数量</div>
          <div class="stats-value">{{ stats.totalRooms }}</div>
        </div>
      </el-col>
      <el-col :md="6" :sm="12" :xs="24">
        <div class="stats-card">
          <div class="stats-title">当前使用中</div>
          <div class="stats-value">{{ stats.inUseRooms }}</div>
        </div>
      </el-col>
      <el-col :md="6" :sm="12" :xs="24">
        <div class="stats-card">
          <div class="stats-title">预约总数</div>
          <div class="stats-value">{{ stats.totalBookings }}</div>
        </div>
      </el-col>
      <el-col :md="6" :sm="12" :xs="24">
        <div class="stats-card">
          <div class="stats-title">使用率</div>
          <div class="stats-value">{{ stats.usageRate }}%</div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

// 统计数据接口
interface StatisticsProps {
  totalRooms: number
  inUseRooms: number
  totalBookings: number
  usageRate: number
}

defineProps<{
  stats: StatisticsProps
}>()
</script>

<style scoped>
.stats-section {
  margin-bottom: 16px;
}

.stats-card {
  height: 100px;
  padding: 16px;
  text-align: center;
  background-color: #fff;
  border-radius: 4px;
  border: 1px solid #ebeef5;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.stats-title {
  font-size: 14px;
  color: #909399;
  margin-bottom: 16px;
}

.stats-value {
  font-size: 28px;
  font-weight: bold;
  color: #409eff;
}

@media (max-width: 768px) {
  .stats-card {
    margin-bottom: 16px;
  }
}
</style>
